<template>
	<view>

		<view class="fullscreen-bg">
			<!-- 在这里放置你的其他内容（会覆盖在背景图上） -->
			<TopNavBar title="排行榜" style="margin: 50rpx" />
			<!-- 内容 -->
			<view class="content">

				<view class="content-imgs">
					<img src="@/static/home/charts.png" alt="">
				</view>
				<view class="tab-area">
					<view class="tab-name" v-for="(item,index) in tabList" :key="index"
						:class="{ 'activeTab': activeTab === index }" @click="btnTbale(index)">
						{{item.name}}
					</view>

				</view>
				<!-- 日榜 -->
				
				<view v-show="activeTab ==1">
					
					<view class="ranking-name">玩家排行榜</view>
					<view>
						<view class="ranking-list">
							<view class="lists" v-for="(item,index) in rankDate">
								<view class="lists-top" style="margin-top: 12px;">
									<view>
										<view class="imgs">
											<img class="imgs" :src="item.avatar" alt="">
										</view>
										<view class="lists-name" style="position: relative;top: -16px;">{{item.nickname}}</view>
									</view>
									<view class="lists-id">ID:{{item.pid}}</view>
								</view>
								<view class="lists-bottom">
							
									<view class="bottom-name">
										<view style="font-size: 45rpx;">{{item.totalAmount}}</view>
										<view style="color: #b9b9b9;">赢来的</view>
									</view>
								</view>
							</view>
						</view>
						
					</view>
					<view class="ranking-name">邀请排行榜</view>
					<view>
							<view class="ranking-list" v-show="teamRankDate.length>0">
							<view class="lists">
								<view class="lists-top topss" v-for="(item,index) in teamRankDate" :key="index">
									<view>
										<view class="numbers">{{1+index}}</view>
										<view class="imgs">
											<img class="imgs" :src="item.avatar" alt="">
										</view>
										<view class="lists-name">
										{{item.nickname}}
										<view style="font-size: 24rpx;">ID:{{item.id}}</view>
										</view>
									</view>
									<view class="lists-id">人数:{{item.team_count}}</view>
								</view>
							
							</view>
						</view>
					</view>
				</view>
				<!-- 周榜 -->
				<view v-show="activeTab ==0">
					<view class="ranking-name">玩家排行榜</view>
					<view>
						<view class="ranking-list">
							<view class="lists" v-for="(item,index) in rankDate" :key="index">
								<view class="lists-top" >
									<view>
										<view class="imgs">
											<img class="imgs" :src="item.avatar" alt="">
										</view>
										<view class="lists-name">{{item.nickname}}</view>
									</view>
									<view class="lists-id">ID:{{item.pid}}</view>
								</view>
								<view class="lists-bottom">
							 
									<view class="bottom-name">
										 <view style="font-size: 45rpx;">{{item.totalAmount}}</view>
										<view style="color: #b9b9b9;">赢来的</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="ranking-name">邀请排行榜</view>
					<view>
							<view class="ranking-list" v-show="teamRankDate.length>0">
							<view class="lists">
								<view class="lists-top topss" v-for="(item,index) in teamRankDate" :key="index">
									<view>
										<view class="numbers">{{1+index}}</view>
										<view class="imgs">
											<img class="imgs" :src="item.avatar" alt="">
										</view>
										<view class="lists-name">
										{{item.nickname}}
										<view style="font-size: 24rpx;">ID:{{item.id}}</view>
										</view>
									</view>
									<view class="lists-id">人数:{{item.team_count}}</view>
								</view>
							
							</view>
						</view>
					</view>
				</view>
				<!-- 月榜 -->
				<view v-show="activeTab ==2">
					<view class="ranking-name">玩家排行榜</view>
					<view>
						<view class="ranking-list">
							<view class="lists" v-for="(item,index) in rankDate" :key="index">
								<view class="lists-top" >
									<view>
										<view class="imgs">
											<img class="imgs" :src="item.avatar" alt="">
										</view>
										<view class="lists-name">{{item.nickname}}</view>
									</view>
									<view class="lists-id">ID:{{item.pid}}</view>
								</view>
								<view class="lists-bottom">
							 
									<view class="bottom-name">
										 <view style="font-size: 45rpx;">{{item.totalAmount}}</view>
										<view style="color: #b9b9b9;">赢来的</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="ranking-name">邀请排行榜</view>
					<view>
					<view class="ranking-list" v-show="teamRankDate.length>0">
						<view class="lists">
							<view class="lists-top topss" v-for="(item,index) in teamRankDate" :key="index">
								<view>
									<view class="numbers">{{1+index}}</view>
									<view class="imgs">
										<img class="imgs" :src="item.avatar" alt="">
									</view>
									<view class="lists-name">
									{{item.nickname}}
									<view style="font-size: 24rpx;">ID:{{item.id}}</view>
									</view>
								</view>
								<view class="lists-id">人数:{{item.team_count}}</view>
							</view>
						
						</view>
					</view>
					</view>
				</view>
			</view>
			<!-- 底部 -->
			<view class="footer-area">
					<view v-for="(item, index) in listDate" :key="index" class="tab-item"
						:class="{ 'active': currentIndex === index+1 }" @click="btnTab(item.pagePath, index)">
					 <button v-if="index==2"  id="payButton" class="btnPostion flex items-center justify-center gap-2 px-5 py-3 rounded-lg btn-gradient text-white font-bold text-base transition-transform duration-200">
					        <i class="fa-brands fa-bitcoin"></i>
					        <span>Pay</span>
					    </button>
						<div v-if="index==2" class="bg-dark text-light min-h-screen flex items-center justify-center">
						    <button id="payButton" class="flex items-center justify-center gap-2 px-5 py-3 rounded-lg btn-gradient text-white font-bold text-base transition-transform duration-200">
						        <i class="fa-brands fa-bitcoin"></i>
						        <span>Pay</span>
						    </button>
							</div>
						<image v-else :src="currentIndex === index+1 ? item.selectedIconPath : item.iconPath" class="tab-icon" />
					</view>
				</view>
			</view>

	</view>
</template>

<script>
	import TopNavBar from '@/components/TopNavBar.vue'
	export default {
		data() {

			return {
				teamRankDate:[],				rankDate:[],
				type:"week",
				activeTab: 1,
				tabList: [{
						name: '日榜'
					},
					{
						name: '周榜'
					},
					{
						name: '月榜'
					}
				],
				currentIndex: 4,
				listDate: [{
						pagePath: "/pages/home/home",
						iconPath: "/static/home/home.png",
						selectedIconPath: "/static/home/homeActive.png",

					},
					{
						pagePath: "/pages/family/family",
						iconPath: "/static/home/family.png",
						selectedIconPath: "/static/home/familyActive.png",
					},
					{pagePath: '/pages/my/myAccount?activeIndex=充值',
						iconPath: "/static/home/add.png",
						selectedIconPath: "/static/home/add.png",
					},
					{
						pagePath: "/pages/ranking/ranking",
						iconPath: "/static/home/ranking.png",
						selectedIconPath: "/static/home/rankingActive.png",
					},
					{
						pagePath: "/pages/my/my",
						iconPath: "/static/home/my.png",
						selectedIconPath: "/static/home/myActive.png",
					},
				]
			}
		},
		components: {
			TopNavBar
		},
		mounted() {
			this.getRank()
			this.getTeamRankRank()
		},
		methods: {
			getRank(){
							uni.$ice.post('user/rank', {type:this.type}, false).then(res => {
								this.rankDate=[]
								if(res.data.rank1){
									this.rank1 = res.data.rank1
									this.rank2 = res.data.rank2	
									this.rank3 = res.data.rank3	
									this.other = res.data.other	
								
									if(this.rank1 && this.rank2==null&& this.rank3==null){
										this.rankDate=[this.rank1]
									}else if (this.rank2&& this.rank3==null){
										this.rankDate=[this.rank1,this.rank2]
									}else if(this.rank3){
											this.rankDate=[this.rank1,this.rank2,this.rank3]
									}
								}else{
									this.rankDate=[]
								}
								
								console.log('排行榜',this.rankDate)
							}).catch(err => {
										
							})
						},
						getTeamRankRank(){
										uni.$ice.post('user/teamRank', {type:this.type}, false).then(res => {
											this.teamRankDate=res.data
										
											
											console.log('排行榜',this.teamRankDate)
										}).catch(err => {
													
										})
									},
			btnTbale(e) {
				this.activeTab = e
				console.log('11111',this.activeTab)
				if(this.activeTab == 0){
					this.type="day"
				}else if(this.activeTab == 1){
					this.type="week"
				}else if(this.activeTab == 2){
					this.type="month"
				}
				this.getRank()
				this.getTeamRankRank()
			},
			btnTab(path, index) {

				this.currentIndex = index+1
				uni.navigateTo({
					url: path
				})
			}

		}
	}
</script>

<style scoped>
	.topss{
		margin-top: 24rpx;
	}
	.numbers{
		display: inline-block;
		position: relative;
		top: -18px;
		padding-right: 9px;
		font-size: 18px;
		font-weight: bold;
	}
	.bottom-name{
		text-align: center;
	}
	.lists-bottom{
		display: flex;
		margin-top: 60rpx;
		justify-content: space-between;
	}
	.lists-id {
		    position: relative;
		    top: 12px;
		    color: #a6a6a6;
		    width: 89px;
		    left: 18px;
	}

	.lists-name {
		display: inline-block;
		font-size: 36rpx;
		position: relative;
		left: 24rpx;
		top: -8rpx;
	}

	.imgs {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		display: inline-block;
	}

	.lists-top {
		display: flex;
		position: relative;
		top: 48rpx;
		justify-content: space-between;
	}

	.lists {
		    /* width: 90%; */
		    margin: 0 auto;
		    background-color: #212437;
		    margin-top: 16px;
		    /* padding-top: 20px; */
		    padding-left: 20px;
		    padding-right: 18px;
		    padding-bottom:32px;
		
	}

	.ranking-list {
		/* padding-bottom: 40px; */
		width: 100%;
		
		margin-top: 24rpx;
		border-radius: 10px;
	}

	.ranking-name {
		font-size: 40rpx;
		font-weight: bold;
		margin-top: 32rpx;
	}

	.activeTab {
		background: linear-gradient(180deg, rgb(27, 88, 249) 19.847%, rgb(89, 133, 248)) !important
	}

	.tab-name {
		width: 96px;
		height: 100%;

		border-radius: 40px;
		text-align: center;
	}

	.tab-area {
		width: 404rpx;
		height: 38px;
		background-color: #212437;
		margin: 0 auto;
		border-radius: 68rpx;
		margin-top: 32rpx;
		display: flex;
		line-height: 38px;

	}

	.content-imgs {
		    display: flex;
		    justify-content: center;
	}

	.content {
		width: 90%;
		margin: 0 auto;
	}



	.footer-area {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 62px;
		/* line-height: 86px; */
		padding-top: 26px;
		display: flex;
		background-color: #212437;
		color: red;
		justify-content: space-around;
		padding-left: 16px;
		padding-right: 16px
	}

	.fullscreen-bg {
		height: 100vh;
		overflow: auto;
		box-sizing: border-box;
		padding-bottom:180rpx;
		/* 100%视窗高度 */
		background-image: url('@/static/banner.png');
		/* 替换为你的图片路径 */
		background-size: cover;
		/* 图片拉伸填满容器 */
		background-position: center;
		/* 图片居中 */
		background-repeat: no-repeat;
		/* 禁止重复 */
	}

	.title {
		color: white;
		font-size: 24px;
		position: relative;
		/* 需要设置定位（relative/absolute） */
		z-index: 1;
		/* 确保文字在背景图上方 */
	}

	.tab-icon {
		width: 30px;
		height: 30px;
	}
</style>


